<template>
	<view class="layout">
		<view class="layout-main">
			<view :key="index" v-for="(item, index) in merchantStore" @click="clickShopsItem(item)" class="layout-main-item">
				<view class="layout-main-item-title">{{ item.name }}</view>

				<view class="layout-main-item-content">
					<view class="layout-main-item-content-left">
						<view class="store-address" @click="clickCopyAddress(item)">
							{{ item.address }}
						</view>
						<view class="store-distance">
							<image :src="distanceIcon" />

							<text v-if="item.distanceStr">{{ item.distanceStr }}</text>
							<text v-else>未获取到您到位置信息</text>
						</view>
					</view>

					<view class="layout-main-item-content-right">
						<image :src="phoneIcon" @click.prevent.stop="openMakePhone(item.phoneNumber)" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';

const phoneIcon = Object.freeze(require('@/static/detail/icon_md_telephone.png'));
const distanceIcon = Object.freeze(require('@/static/detail/icon_md_dz.png'));

export default {
	name: 'TandianStore',

	data() {
		return {
			phoneIcon,
			distanceIcon
		};
	},

	computed: {
		...mapGetters(['merchantStore']),

		isChangeExploreShopInfo() {
			/* eslint-disable */
			const pages = getCurrentPages();
			const beforePage = pages[pages.length - 2] || {};

			return beforePage?.$vm?.changeExploreShopInfo;
			/* eslint enable */
		}
	},

	methods: {
		clickCopyAddress(params) {
			const { isChangeExploreShopInfo } = this;

			if (isChangeExploreShopInfo) {
				return;
			}

			const { address } = params;

			uni.setClipboardData({
				data: address
			});
		},

		openMakePhone(phone) {
			const { isChangeExploreShopInfo } = this;

			if (isChangeExploreShopInfo) {
				return;
			}

			uni.makePhoneCall({
				phoneNumber: phone
			});
		},

		clickShopsItem(params) {
			const { isChangeExploreShopInfo } = this;

			if (!isChangeExploreShopInfo) {
				return;
			}

			const { address, name, latitude, longitude } = params;
			isChangeExploreShopInfo({
				latitude,
				longitude,
				exploreStore: name,
				exploreStoreAddress: address
			});

			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	@include Db_iosBottomDistance();

	&-main {
		padding: 0 20rpx;

		&-item {
			margin-top: 20rpx;
			min-height: 218rpx;
			background: #fff;
			padding-left: 28rpx;
			border-radius: 24rpx;

			&-title {
				padding: 26rpx 28rpx 26rpx 0;
				color: #292f36;
				font-size: 32rpx;
				line-height: 44rpx;
				font-weight: bold;
			}

			&-content {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-top: 2rpx solid #f6f6f6;

				&-left {
					flex: 1;

					.store-address {
						color: #333;
						font-size: 24rpx;
						line-height: 32rpx;
					}

					.store-distance {
						margin-top: 14rpx;
						color: #999;
						font-size: 20rpx;
						display: flex;
						align-items: center;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 4rpx;
						}
					}
				}

				&-right {
					width: 194rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					// padding-right: 34rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						padding: 34rpx;
					}
				}
			}
		}
	}
}
</style>
